<template>
	<view  class="grey text " :class="$tm.vx.state().tmVuetify.black ? 'black bk' : ''" :style="{ height: bodyHeight + 'px' }">
		
		<tm-menubars  title="购物车工具条" color="bg-gradient-primary-lighten" :showback="true"></tm-menubars>
		
		<view class="flex fulled-height" >
			<view class="fulled-height " :class="$tm.vx.state().tmVuetify.black ? 'grey-darken-4 bk' : 'grey-lighten-5'">
				<tm-sliderNav :fontSize="24"  @change="navChange"  color="blue" :round="0" :width="160" :list="listMenu" rang-key="text"></tm-sliderNav>
			</view>
			<view class="fulled-height "  :class="$tm.vx.state().tmVuetify.black ? 'black ' : 'white'" style="width:calc(100% - 160rpx);">
				<block v-for="(item,index) in list" :key="index">
					<tm-cartCellListFood border="" color="blue"  @change="add($event,index)" :mdata="item" :cartNum.sync="item.buy" :key="item.id"></tm-cartCellListFood>
				</block>
			</view>
		</view>
		<tm-cartBarFood @confirm="confirm" @change="carchange" @clear="clearList" :list="test" position="bottom" color="blue"  btnColor="bg-gradient-red-accent"></tm-cartBarFood>

	</view>
</template>

<script>
	/**
	 * 实例不同于外卖（原生app），直接显示所有列表，为了不卡，
	 * 每次点击类目都是重新加载数据列表，只显示一列，不显示所有。
	 */
	import tmSliderNav from "@/tm-vuetify/components/tm-sliderNav/tm-sliderNav.vue"
	import tmCartCellListFood from "@/tm-vuetify/components/tm-cartCellListFood/tm-cartCellListFood.vue"
	import tmListitem from "@/tm-vuetify/components/tm-listitem/tm-listitem.vue"
	import tmMenubars from "@/tm-vuetify/components/tm-menubars/tm-menubars.vue"
	import tmFullView from "@/tm-vuetify/components/tm-fullView/tm-fullView.vue"
	import tmSheet from "@/tm-vuetify/components/tm-sheet/tm-sheet.vue"
	import tmCartBarFood from "@/tm-vuetify/components/tm-cartBarFood/tm-cartBarFood.vue"
	export default {
		components:{tmSliderNav,tmListitem,tmMenubars,tmFullView,tmSheet,tmCartCellListFood,tmCartBarFood},
		data() {
			return {
				listMenu:[
					{text:'家电家居',dot:0,id:0},
					{text:'美壮美容',dot:0,id:1},
					{text:'零售食',dot:0,id:2},
				],
				activeIndex:0,
				list:[],
				test:[],
				bodyHeight:50,
			};
		},
		mounted() {
			this.navChange()
			let sy = uni.getSystemInfoSync();
			this.bodyHeight = sy.windowHeight - sy.statusBarHeight - 50;
		},
		methods: {
			//切换分类时获取数据。
			navChange(index=0){
				//if(this.activeIndex ==index) return;
				console.log(index);
				this.activeIndex = index;
				let testlist = [
					[
						{
							img:'https://picsum.photos/300?k=2',
							title:'产品1这个产品会这个产',
							price:36.2,
							salePrice:76.4,
							saleLabel:[],
							unit:'/斤',
							id:1,
							buy:0,
							itemId:0
						},
						{
							img:'https://picsum.photos/300?k=6',
							title:'产品2（任选）',
							label:'这个产品是只有几个融会',
							price:36.2,
							salePrice:76.4,
							unit:'/斤',
							id:2,
							buy:0,
							itemId:0
						},
						{
							img:'https://picsum.photos/300?k=1',
							title:'产品3（任选）',
							label:'这个产品是只有几个融会',
							price:36.2,
							salePrice:76.4,
							saleLabel:['7折优惠','首单减3元'],
							unit:'/斤',
							id:3,
							buy:0,
							itemId:0
						}
					],
					[
						{
							img:'https://picsum.photos/300?k=22',
							title:'产品21',
							label:'这个产品是只有几个融会',
							price:36.2,
							salePrice:76.4,
							saleLabel:['7折优惠','首单减3元'],
							unit:'/斤',
							id:4,
							buy:0,
							itemId:1
						},
						{
							img:'https://picsum.photos/300?k=26',
							title:'产品22（任选）',
							label:'这个产品是只有几个融会',
							price:36.2,
							salePrice:76.4,
							unit:'/斤',
							id:5,
							buy:0,
							itemId:1
						},
						{
							img:'https://picsum.photos/300?k=21',
							title:'产品23（任选）',
							label:'这个产品是只有几个融会',
							price:36.2,
							salePrice:76.4,
							saleLabel:['7折优惠','首单减3元'],
							unit:'/斤',
							id:6,
							buy:0,
							itemId:1
						}
					],
					[
						{
							img:'https://picsum.photos/300?k=13',
							title:'产品31',
							label:'这个产品是只有几个融会',
							price:36.2,
							salePrice:76.4,
							saleLabel:['7折优惠','首单减3元'],
							unit:'/斤',
							id:7,
							buy:0,
							itemId:2
						},
						{
							img:'https://picsum.photos/300?k=12',
							title:'产品32（任选）',
							label:'这个产品是只有几个融会',
							price:36.2,
							salePrice:76.4,
							unit:'/斤',
							id:8,
							buy:0,
							itemId:2
						},
						{
							img:'https://picsum.photos/300?k=10',
							title:'产品33（任选）',
							label:'这个产品是只有几个融会',
							price:36.2,
							salePrice:76.4,
							saleLabel:['7折优惠','首单减3元'],
							unit:'/斤',
							id:9,
							buy:0,
							itemId:2
						}
					],
				];
				this.list = testlist[this.activeIndex];
				this.selectedListNum();
				this.jishunFenLeiTotal();
			},
			//反选默认赋值
			selectedListNum(){
				let t = this;
				this.list.forEach((item,index)=>{
					let index2 = t.test.findIndex(item2=>{
						return item2.id == item.id;
					})
					if(index2>-1){
						item.buy = t.test[index2].buy;
						t.list.splice(index,1,item)
					}else{
						item.buy = 0;
						t.list.splice(index,1,item)
					}
				})
			},
			//计算分类的总数。
			jishunFenLeiTotal(){
				let t = this;
				let dm = t.listMenu;
				for(let i=0;i<dm.length;i++){
					let dot =0;
					for(let j=0;j<t.test.length;j++){
						if(dm[i].id === t.test[j].itemId){
							dot = dot+t.test[j].buy;
						}
					}
					dm[i].dot = dot
					//this.$set(this.listMenu[i],'dot',dot)
					this.listMenu.splice(i,1,{...dm[i]})
					
				}
				
				//t.listMenu = [...dm];
			},
			//num是增加的数量，prentIndex是所在list中的索引。
			add(num,prentIndex) {
				let pitem = this.list[prentIndex];
				let index = this.test.findIndex(item=>{
					return item.id == pitem.id;
				})
				if(index>-1){
					
					if(this.test[index].buy!= num && num!=0){
						this.test.splice(index,1,pitem)
					}
					if(num == 0){
						if(index>-1){
							if(this.test[index]){

								this.test.splice(index,1)
							}
						}
					}
				}else{
					if(num>0){
						this.test.push(pitem);
						
					}
				}
				this.jishunFenLeiTotal();
			},
			//e = {index:购物车商品增减的索引，num:购物车增减的数量。}
			carchange(e){
				let t  =this;
				let index = this.list.findIndex(item=>{
					return item?.id == t.test[e.index]?.id;
				})
				
				if (index>-1) {
					if(!t.test[e.index]) return;
					t.test.splice(e.index,1,{...t.test[e.index],buy:e.num})
					let pd = this.$tm.deepClone(t.list[index]);
					pd.buy = e.num;
					t.list.splice(index,1,pd)
				}else{
					if(e.num==0&&this.test[e.index]){
						this.$delete(this.test,e.index)
					}else{
						//在非h5端此数据不变同步到购物车，因为绑定的当前列表不在显示页面上。
						//但h5端可以同步。
						// #ifndef H5
						if(!this.test[e.index]) return;
						if( this.test[e.index].buy != e.num){
							//console.log('未同步');
							this.test.splice(e.index,1,{...this.test[e.index],buy:e.num})
						}
						// #endif
					}
				}
				this.jishunFenLeiTotal();
			},
			//清空购物车。
			clearList(e){
				let t = this;
				let plist = [...t.list]
				for(let i=0;i<plist.length;i++){
					let item = plist[i];
					
					for(let j=0;j<t.test.length;j++){
						let item2 = t.test[j];
						
						if(item2.id===item.id){
							item.buy=0;
							this.list.splice(i,1,item)
						}

					}
				}
				this.test = [];
				this.jishunFenLeiTotal()
			},
			//确认提交订单。
			confirm(e){
				console.log(e);
				uni.$tm.toast("提交购物订单")
			}
		},
	}
</script>

<style >

</style>
